<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT" />










<meta name="description" content="第 1 题请写出一个符合 W3C 规范的 HTML 文件，要求: 页面标题为「我的页面」页面中引入了一个外部 CSS 文件，文件路径为 /style.css页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效页面中引入了一个外部 JS 文件，路径为 /">
<meta property="og:type" content="article">
<meta property="og:title" content="期中考试试题整理">
<meta property="og:url" content="http://yoursite.com/2018/08/08/期中考试试题整理/index.html">
<meta property="og:site_name" content="From&#39;s blog">
<meta property="og:description" content="第 1 题请写出一个符合 W3C 规范的 HTML 文件，要求: 页面标题为「我的页面」页面中引入了一个外部 CSS 文件，文件路径为 /style.css页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效页面中引入了一个外部 JS 文件，路径为 /">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2018-08-08T15:20:23.999Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="期中考试试题整理">
<meta name="twitter:description" content="第 1 题请写出一个符合 W3C 规范的 HTML 文件，要求: 页面标题为「我的页面」页面中引入了一个外部 CSS 文件，文件路径为 /style.css页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效页面中引入了一个外部 JS 文件，路径为 /">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/08/08/期中考试试题整理/"/>





  <title>期中考试试题整理 | From's blog</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">From's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/08/08/期中考试试题整理/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Wang hang">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="From's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">期中考试试题整理</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-08-08T23:15:04+08:00">
                2018-08-08
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="第-1-题"><a href="#第-1-题" class="headerlink" title="第 1 题"></a>第 1 题</h3><p>请写出一个符合 W3C 规范的 HTML 文件，要求:</p>
<p>页面标题为「我的页面」<br>页面中引入了一个外部 CSS 文件，文件路径为 /style.css<br>页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效<br>页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效<br>页面中引入了一个外部 JS 文件，路径为 /main.js<br>页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK<br>页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意</p>
<p>学生的回答:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;我的页面&lt;/title&gt;</span><br><span class="line">    &lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot;&gt;</span><br><span class="line">    &lt;link rel=&quot;stylesheet&quot; href=&quot;./print.css&quot; media=&quot;print&quot;&gt;</span><br><span class="line">    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/mobile.css&quot; media=&quot;only(max-width: 500px)&quot;&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;p&gt;svg画个圆&lt;/p&gt;</span><br><span class="line">    &lt;svg&gt;</span><br><span class="line">        &lt;circle cx=&quot;80&quot; cy=&quot;80&quot; r=&quot;50&quot; fill=&quot;black&quot; /&gt;   //cx 和 cy 属性定义圆点的 x 和 y 坐标,r是圆的半径 ，fill填充的颜色，还可以设置           </span><br><span class="line">         //stroke-width和stroke属性指定了当前对象的轮廓的宽度，和颜色</span><br><span class="line">    &lt;/svg&gt;</span><br><span class="line">    &lt;script type=&quot;text/javascript&quot; src=&quot;/main.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">    &lt;script type=&quot;text/javascript&quot; src=&quot;/gbk.js&quot; charset=&quot;gbk&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></p>
<hr>
<h3 id="第-2-题"><a href="#第-2-题" class="headerlink" title="第 2 题"></a>第 2 题</h3><p>2016年腾讯前端面试题：<br>移动端是怎么做适配的？</p>
<p>回答要点：</p>
<p>meta viewport<br>媒体查询（教程）<br>动态 rem 方案（教程）<br>这三个知识点只有第一个我有讲过，你需要自学第二点和第三点。<br>如果大家在这道题上都答得不好，我会在考试后直播这两节课的录屏。（因为我觉得视频里已经讲得很好了，没必要重新讲一遍）</p>
<p>学生的回答<br>移动端是怎么做适配的呢？<br>主要有一下几点：</p>
<p>1.确定适配的目标<br>因为做移动端页面存在各种尺寸设备上的兼容问题，和怎样做能更好地适配不同屏幕宽度的移动设备,，重点要解决下面几个问题</p>
<p>viewport<br>移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。<br>设置理想的视口<br>一般我们在编辑器里输入meta:vp按下tab就可以自动补全这些</p>
<p><meta name="viewport" content="width=device-width, initial-scale=1.0"><br>width=device-width 这句代码可以把布局视口设置成为浏览器（屏幕）的宽度。<br>initial-scale=1 的意思是初始缩放的比例是1，使用它的时候，同时也会将布局视口的尺寸设置为缩放后的尺寸。而缩放的尺寸就是基于屏幕的宽度来的，也就起到了和width=device-width同样的效果。<br>设置理想视口，使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)一样大,DOM文档主宽度即为屏幕宽度<br>要注意的是：1个CSS像素(1px)由多少设备像素显示由具体设备而不同。<br>2.媒体查询（ @media）<br>使用 @media 查询，可以针对不同的媒体类型定义不同的样式。<br>@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。<br>当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。<br>媒体查询的结果可以用css文件代替</p>
<p>3.rem<br>rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。<br>需要了解的东西：</p>
<p>1.设备像素（device pixel）：设备能控制显示的最小物理单位，显示器上一个个的点。大小固定，不可变。其实就是常说相对屏幕的分辨率。比如iPhone6的1334750px。<br>2.设备独立像素（dip/dp：device-independent pixel）：计算机坐标系统中的一个点，该点代表一个可由程序使用并控制的虚拟像素，当设备像素比等于1的时候。它在数值上与css数值是相等的。比如iPhone6的375667px。<br>3.设备像素比(device pixel ratio)：通过window.devicePixelRatio获取。设备像素比DPR = 设备像素/ 设备独立像素。iPhone4及以上的像素比不是1，这就影响了用几个设备像素去展示1个CSS像素了。<br>4.CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。<br>在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位。<br>5.initial-scale定义视口的缩放比例，1 css pixel 等于1 viewport pixel 。当改变initial-scale的大小时，即缩放网页，相应的，设备像素也响应的改变。<br>6.document.documentElement.clientWidth代表文档的宽度。文档的宽度是由css控制的。<br>7.window.screen.width获取的值是设备独立像素。不论是PC端还是移动端，window.screen.width获取的值是设备独立像素。比如iPhone6的375*667px。<br>8.window.innerWidth获取的是浏览器视口（viewport）宽度<br>其他相关内容可以看我的博客博客地址</p>
<hr>
<h3 id="第-3-题"><a href="#第-3-题" class="headerlink" title="第 3 题"></a>第 3 题</h3><p>2017年腾讯前端实习面试题（二面）：<br>用过CSS3吗? 实现圆角矩形和阴影怎么做?</p>
<p>学生的回答<br>用过</p>
<p>圆角矩形：<br>CSS3实现圆角矩形需设置一个属性：border-radius。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。<br>但是由于浏览器问题，并非所有浏览器，都支持将圆角半径设为一个百分比值。<br>最安全的做法，就是将每个圆角边框的风格和宽度，都设为一样的值，并且避免使用百分比值。<br>阴影：<br>使用box-shadow<br>box-shadow的设置有4个参数，含义分别为：x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。</p>
<hr>
<h3 id="第-4-题"><a href="#第-4-题" class="headerlink" title="第 4 题"></a>第 4 题</h3><p>出处同上（一面二面都问了）：<br>什么是闭包，闭包的用途是什么？</p>
<p>我在课堂上讲过闭包是什么，也演示过闭包的用途，但是并没有帮大家总结。<br>请自行搜索。</p>
<p>学生的回答<br>闭包是什么：<br>闭包就是能够读取其他函数内部变量的函数。<br>由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。<br>所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。</p>
<p>闭包的用途：<br>最大用处有两个，1.可以读取函数内部的变量，2.让这些变量的值始终保持在内存中。<br>闭包给访问外部函数定义的内部变量创造了条件。也将关于函数的一切封闭到了函数内部，减少了全局变量是闭包的真实含义。</p>
<p>什么时候需要使用闭包：<br>当每次调用函数A时都要改变全局变量B，且B只与A有关。以往没有闭包时只能将B定义为全局变量，现在可以将B定义为A的内部变量，同时在A内部定义闭包C，并将C当值返回。</p>
<p>使用闭包要注意：<br>由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包。</p>
<hr>
<h3 id="第-5-题"><a href="#第-5-题" class="headerlink" title="第 5 题"></a>第 5 题</h3><p>出处同上：</p>
<p>call、apply、bind 的用法分别是什么？</p>
<p>学生的回答<br>call<br>call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数。<br>语法：fun.call(thisArg, arg1, arg2, …)<br>参数<br>thisArg<br>在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。<br>arg1, arg2, …<br>指定的参数列表</p>
<p>apply<br>apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。<br>apply 的作用和 call 一样，只是在调用的时候，传参数的方式不同。区别是 apply 接受的是数组参数，call 接受的是连续参数。<br>语法：func.apply(thisArg, [argsArray])<br>参数：<br>thisArg<br>在 func 函数运行时使用的 this 值。需要注意的是，使用的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的包装对象。<br>argsArray<br>一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 function 函数。</p>
<p>bind<br>语法：fun.bind(thisArg[, arg1[, arg2[, …]]])<br>bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。<br>bind 接受的参数跟 call 一致，只是 bind 不会立即调用，它会生成一个新的函数，你想什么时候调就什么时候调<br>参数<br>thisArg<br>当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。<br>arg1, arg2, …<br>当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。</p>
<hr>
<h3 id="第-6-题"><a href="#第-6-题" class="headerlink" title="第 6 题"></a>第 6 题</h3><p>出处同上：<br>请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。</p>
<p>例如：</p>
<p>状态码 200 表示响应成功。</p>
<p>学生的回答<br>状态码    描述<br>200    请求成功。一般用于GET与POST请求<br>201    成功请求并创建了新的资源<br>202    已接受。已经接受请求，但未处理完成<br>301    永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。<br>302    临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI<br>303    查看其它地址。与301类似。使用GET和POST请求查看<br>304    未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。<br>305    使用代理。所请求的资源必须通过代理访问<br>400    客户端请求的语法错误，服务器无法理解<br>401    请求要求用户的身份认证<br>402    保留，将来使用<br>403    服务器理解请求客户端的请求，但是拒绝执行此请求<br>404    服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置”您所请求的资源无法找到”的个性页面<br>405    客户端请求中的方法被禁止<br>500    服务器内部错误，无法完成请求<br>501    服务器不支持请求的功能，无法完成请求<br>502    充当网关或代理的服务器，从远端服务器接收到了一个无效的请求<br>503    由于超载或系统维护，服务器暂时的无法处理客户端的请求<br>504    充当网关或代理的服务器，未及时从远端服务器获取请求<br>505    服务器不支持请求的HTTP协议的版本，无法完成处理</p>
<hr>
<h3 id="第-7-题"><a href="#第-7-题" class="headerlink" title="第 7 题"></a>第 7 题</h3><p>出处同上：<br>请写出一个 HTTP post 请求的内容，包括四部分。<br>其中<br>第四部分的内容是 username=ff&amp;password=123<br>第二部分必须含有 Content-Type 字段<br>请求的路径为 /path</p>
<p>学生的回答<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">1.POST /path HTTP/1.1</span><br><span class="line">2.Host: www.baidu.com</span><br><span class="line">2.User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36</span><br><span class="line">2.Content-Type: application/x-www-form-urlencoded</span><br><span class="line">2.Content-Length: 24</span><br><span class="line">2.Accept: text/html</span><br><span class="line">3.</span><br><span class="line">4.username=ff&amp;password=123</span><br></pre></td></tr></table></figure></p>
<hr>
<h3 id="第-8-题"><a href="#第-8-题" class="headerlink" title="第 8 题"></a>第 8 题</h3><p>请说出至少三种排序的思路，这三种排序的时间复杂度分别为</p>
<p>O(n*n)<br>O(n log2 n)<br>O(n + max)<br>学生的回答<br>O(n^n )<br>冒泡排序<br>排一个数组，对于n个变量的数组，需要交换变量位置n^2 次，算法复杂度就是O(n^2 )</p>
<p>O(n log2 n)<br>快速排序<br>通过一趟扫描将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列，算法复杂度就是O(n log2 n)</p>
<p>O(n + max)<br>基数排序<br>把元素从个位排好序，然后再从十位排好序，，，，一直到元素中最大数的最高位排好序，就搞定了，算法复杂度就是O(n + max)</p>
<hr>
<h3 id="第-9-题"><a href="#第-9-题" class="headerlink" title="第 9 题"></a>第 9 题</h3><p>著名前端面试题：<br>一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？</p>
<p>这一题是在挖掘你的知识边界，所以你知道多少就要答多少。</p>
<p>可以先查阅一些资料再查，但是不要把自己不懂的东西放在答案里，面试官会追问的。</p>
<p>学生的回答<br>1.输入地址：<br>这个不用多说了，就是输入网址</p>
<p>2.浏览器查找域名的 IP 地址，这一步包括 DNS 具体的查找过程<br>简单地说就是把用户输入的网址转换成ip，访问到服务器</p>
<p>3.浏览器向 web 服务器发送一个 HTTP 请求<br>通过浏览器向服务器发送一个POST请求，浏览器标识自己（User-Agent头），并指出它将接受哪种类型的响应（Accept和Accept-Encoding标头）。连接标题要求服务器保持打开TCP连接以进一步请求。<br>其他的cookie目前还没学不懂，就不做表述了</p>
<p>4.服务器的永久重定向响应（从 <a href="http://qq.com" target="_blank" rel="noopener">http://qq.com</a> 到 <a href="http://www.qq.com）" target="_blank" rel="noopener">http://www.qq.com）</a><br>这个不太懂，网上</p>
<p>5.浏览器跟踪重定向地址<br>同上</p>
<p>6.服务器处理请求<br>服务器将收到GET请求，处理它并发送回应。</p>
<p>7.服务器返回一个 HTTP 响应<br>Content-Encoding标头告诉浏览器使用gzip算法压缩响应主体。解压blob后，你会看到你期望的HTML<br>blob是什么：BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器，典型的BLOB是一张图片或一个声音文件，由于它们的尺寸，必须使用特殊的方式来处理（例如：上传、下载或者存放到一个数据库）</p>
<p>8.浏览器显示 HTML<br>开始渲染页面</p>
<p>9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）<br>当浏览器呈现HTML时，它会注意到需要获取其他URL的标签。浏览器将发送一个GET请求来检索每个文件。</p>
<p>10.浏览器发送异步请求<br>异步还没有学，下面是我查的一些<br>浏览器中执行的JavaScript必须向服务器发送异步请求。异步请求是通过编程构造的GET或POST请求，转到特殊的URL。<br>“AJAX”，即“异步JavaScript和XML”，即使没有特别的理由，服务器必须将响应格式化为XML格式。</p>
<hr>
<h3 id="第-10-题"><a href="#第-10-题" class="headerlink" title="第 10 题"></a>第 10 题</h3><p>著名面试题：<br>如何实现数组去重？<br>假设有数组 array = [1,5,2,3,4,2,3,1,3,4]<br>你要写一个函数 unique，使得<br>unique(array) 的值为 [1,5,2,3,4]<br>也就是把重复的值都去掉，只保留不重复的值。</p>
<p>要求：</p>
<p>不要做多重循环，只能遍历一次<br>请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）<br>学生的回答:</p>
<p>ES5环境<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">array = [1,5,2,3,4,2,3,1,3,4]</span><br><span class="line">var tmpObj = &#123;&#125;;</span><br><span class="line">var result = [];</span><br><span class="line">array.forEach(function(a) &#123;</span><br><span class="line">  var key = (typeof a) + a;</span><br><span class="line">  if (!tmpObj[key]) &#123;</span><br><span class="line">    tmpObj[key] = true;</span><br><span class="line">    result.push(a);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line">console.log(result)   // (5) [1, 5, 2, 3, 4]</span><br></pre></td></tr></table></figure></p>
<p>ES6环境<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">array = [1,5,2,3,4,2,3,1,3,4]</span><br><span class="line">function unique(array) &#123;</span><br><span class="line">  return Array.from(new Set(array))</span><br><span class="line">&#125; </span><br><span class="line">unique (array) // (5) [1, 5, 2, 3, 4]</span><br></pre></td></tr></table></figure></p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/08/05/前端面试选考篇—Node-js相关知识/" rel="next" title="前端面试选考篇—Node.js相关知识">
                <i class="fa fa-chevron-left"></i> 前端面试选考篇—Node.js相关知识
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/09/13/class类的使用/" rel="prev" title="class类的使用">
                class类的使用 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">Wang hang</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">52</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            

            
              
              
              <div class="site-state-item site-state-tags">
                
                  <span class="site-state-item-count">2</span>
                  <span class="site-state-item-name">tags</span>
                
              </div>
            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#第-1-题"><span class="nav-number">1.</span> <span class="nav-text">第 1 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-2-题"><span class="nav-number">2.</span> <span class="nav-text">第 2 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-3-题"><span class="nav-number">3.</span> <span class="nav-text">第 3 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-4-题"><span class="nav-number">4.</span> <span class="nav-text">第 4 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-5-题"><span class="nav-number">5.</span> <span class="nav-text">第 5 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-6-题"><span class="nav-number">6.</span> <span class="nav-text">第 6 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-7-题"><span class="nav-number">7.</span> <span class="nav-text">第 7 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-8-题"><span class="nav-number">8.</span> <span class="nav-text">第 8 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-9-题"><span class="nav-number">9.</span> <span class="nav-text">第 9 题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第-10-题"><span class="nav-number">10.</span> <span class="nav-text">第 10 题</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Wang hang</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
